<!DOCTYPE html>

<html>
<head>
  <title>caman.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
      <ul id="jump_to">
        <li>
          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
          <a class="small" href="javascript:void(0);">+</a>
          <div id="jump_wrapper">
          <div id="jump_page">
            
              
              <a class="source" href="analyze.html">
                analyze.coffee
              </a>
            
              
              <a class="source" href="autoload.html">
                autoload.coffee
              </a>
            
              
              <a class="source" href="blender.html">
                blender.coffee
              </a>
            
              
              <a class="source" href="calculate.html">
                calculate.coffee
              </a>
            
              
              <a class="source" href="caman.html">
                caman.coffee
              </a>
            
              
              <a class="source" href="convert.html">
                convert.coffee
              </a>
            
              
              <a class="source" href="event.html">
                event.coffee
              </a>
            
              
              <a class="source" href="filter.html">
                filter.coffee
              </a>
            
              
              <a class="source" href="io.html">
                io.coffee
              </a>
            
              
              <a class="source" href="layer.html">
                layer.coffee
              </a>
            
              
              <a class="source" href="logger.html">
                logger.coffee
              </a>
            
              
              <a class="source" href="module.html">
                module.coffee
              </a>
            
              
              <a class="source" href="pixel.html">
                pixel.coffee
              </a>
            
              
              <a class="source" href="plugin.html">
                plugin.coffee
              </a>
            
              
              <a class="source" href="renderer.html">
                renderer.coffee
              </a>
            
              
              <a class="source" href="store.html">
                store.coffee
              </a>
            
              
              <a class="source" href="util.html">
                util.coffee
              </a>
            
              
              <a class="source" href="blenders.html">
                blenders.coffee
              </a>
            
              
              <a class="source" href="filters.html">
                filters.coffee
              </a>
            
              
              <a class="source" href="size.html">
                size.coffee
              </a>
            
              
              <a class="source" href="blur.html">
                blur.coffee
              </a>
            
              
              <a class="source" href="camera.html">
                camera.coffee
              </a>
            
              
              <a class="source" href="compoundBlur.html">
                compoundBlur.coffee
              </a>
            
              
              <a class="source" href="edges.html">
                edges.coffee
              </a>
            
              
              <a class="source" href="posterize.html">
                posterize.coffee
              </a>
            
              
              <a class="source" href="presets.html">
                presets.coffee
              </a>
            
              
              <a class="source" href="rotate.html">
                rotate.coffee
              </a>
            
              
              <a class="source" href="stackBlur.html">
                stackBlur.coffee
              </a>
            
              
              <a class="source" href="threshold.html">
                threshold.coffee
              </a>
            
          </div>
        </li>
      </ul>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>caman.coffee</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              <p>NodeJS compatibility</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="keyword">if</span> exports?
  Root = exports
  Canvas = require <span class="string">'canvas'</span>
  Image = Canvas.Image

  Fiber = require <span class="string">'fibers'</span>

  fs = require <span class="string">'fs'</span>
  http = require <span class="string">'http'</span>
<span class="keyword">else</span>
  Root = window</pre></div></div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>Here it begins. Caman is defined.
There are many different initialization for Caman, which are described on the 
<a href="http://camanjs.com/guides">Guides</a>.</p>
<p>Initialization is tricky because we need to make sure everything we need is actually fully 
loaded in the DOM before proceeding. When initialized on an image, we need to make sure that the 
image is done loading before converting it to a canvas element and writing the pixel data. If we 
do this prematurely, the browser will throw a DOM Error, and chaos will ensue. In the event that 
we initialize Caman on a canvas element while specifying an image URL, we need to create a new 
image element, load the image, then continue with initialization.</p>
<p>The main goal for Caman was simplicity, so all of this is handled transparently to the end-user. </p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">Caman</span> <span class="keyword">extends</span> <span class="title">Module</span></span></pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>The current version.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="property">@version</span>:
    release: <span class="string">"4.1.2"</span>
    date: <span class="string">"7/27/2013"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>@property [Boolean] Debug mode enables console logging.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="property">@DEBUG</span>: <span class="literal">false</span></pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>@property [Boolean] Allow reverting the canvas?
  If your JS process is running out of memory, disabling
  this could help drastically.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="property">@allowRevert</span>: <span class="literal">true</span></pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>@property [String] Default cross-origin policy.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="property">@crossOrigin</span>: <span class="string">"anonymous"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>@property [String] Set the URL of the image proxy script.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="property">@remoteProxy</span>: <span class="string">""</span></pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p>@proparty [String] The GET param used with the proxy script.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="property">@proxyParam</span>: <span class="string">"camanProxyUrl"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>@property [Boolean] Are we in a NodeJS environment?</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="property">@NodeJS</span>: exports?</pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-10">&#182;</a>
              </div>
              <p>@property [Boolean] Should we check the DOM for images with Caman instructions?</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="property">@autoload</span>: <span class="keyword">not</span> Caman.NodeJS</pre></div></div>
            
        </li>
        
        
        <li id="section-11">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-11">&#182;</a>
              </div>
              <p>Custom toString()
@return [String] Version and release information.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="property">@toString</span>: -&gt;
    <span class="string">"Version "</span> + Caman.version.release + <span class="string">", Released "</span> + Caman.version.date;</pre></div></div>
            
        </li>
        
        
        <li id="section-12">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-12">&#182;</a>
              </div>
              <p>Get the ID assigned to this canvas by Caman.
@param [DOMObject] canvas The canvas to inspect.
@return [String] The Caman ID associated with this canvas.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  <span class="property">@getAttrId</span>: (canvas) -&gt;
    <span class="keyword">return</span> <span class="literal">true</span> <span class="keyword">if</span> Caman.NodeJS

    <span class="keyword">if</span> <span class="keyword">typeof</span> canvas <span class="keyword">is</span> <span class="string">"string"</span>
      canvas = $(canvas)

    <span class="keyword">return</span> <span class="literal">null</span> <span class="keyword">unless</span> canvas? <span class="keyword">and</span> canvas.getAttribute?
    canvas.getAttribute <span class="string">'data-caman-id'</span></pre></div></div>
            
        </li>
        
        
        <li id="section-13">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-13">&#182;</a>
              </div>
              <p>The Caman function. While technically a constructor, it was made to be called without
the <code>new</code> keyword. Caman will figure it out.</p>
<p>@param [DOMObject, String] initializer The DOM selector or DOM object to initialize.
@overload Caman(initializer)
  Initialize Caman without a callback.</p>
<p>@overload Caman(initializer, callback)
  Initialize Caman with a callback.
  @param [Function] callback Function to call once initialization completes.</p>
<p>@overload Caman(initializer, url)
  Initialize Caman with a URL to an image and no callback.
  @param [String] url URl to an image to draw to the canvas.</p>
<p>@overload Caman(initializer, url, callback)
  Initialize Caman with a canvas, URL to an image, and a callback.
  @param [String] url URl to an image to draw to the canvas.
  @param [Function] callback Function to call once initialization completes.</p>
<p>@overload Caman(file)
  <strong>NodeJS</strong>: Initialize Caman with a path to an image file and no callback.
  @param [String, File] file File object or path to image to read.</p>
<p>@overload Caman(file, callback)
  <strong>NodeJS</strong>: Initialize Caman with a file and a callback.
  @param [String, File] file File object or path to image to read.
  @param [Function] callback Function to call once initialization completes.</p>
<p>@return [Caman] Initialized Caman instance.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  constructor: -&gt;
    <span class="keyword">throw</span> <span class="string">"Invalid arguments"</span> <span class="keyword">if</span> arguments.length <span class="keyword">is</span> <span class="number">0</span>

    <span class="keyword">if</span> @ <span class="keyword">instanceof</span> Caman</pre></div></div>
            
        </li>
        
        
        <li id="section-14">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-14">&#182;</a>
              </div>
              <p>We have to do this to avoid polluting the global scope
because of how Coffeescript binds functions specified 
with =&gt; and the fact that Caman can be invoked as both
a function and as a &#39;new&#39; object.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="property">@finishInit</span> = <span class="property">@finishInit</span>.bind(@)
      <span class="property">@imageLoaded</span> = <span class="property">@imageLoaded</span>.bind(@)

      args = arguments[<span class="number">0</span>]

      <span class="keyword">unless</span> Caman.NodeJS
        id = parseInt Caman.getAttrId(args[<span class="number">0</span>]), <span class="number">10</span>
        callback = <span class="keyword">if</span> <span class="keyword">typeof</span> args[<span class="number">1</span>] <span class="keyword">is</span> <span class="string">"function"</span>
          args[<span class="number">1</span>]
        <span class="keyword">else</span> <span class="keyword">if</span> <span class="keyword">typeof</span> args[<span class="number">2</span>] <span class="keyword">is</span> <span class="string">"function"</span>
          args[<span class="number">2</span>]
        <span class="keyword">else</span>
          -&gt;

        <span class="keyword">if</span> !isNaN(id) <span class="keyword">and</span> Store.has(id)
          <span class="keyword">return</span> Store.execute(id, callback)</pre></div></div>
            
        </li>
        
        
        <li id="section-15">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-15">&#182;</a>
              </div>
              <p>Every instance gets a unique ID. Makes it much simpler to check if two variables are the 
same instance.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>      <span class="property">@id</span> = Util.uniqid.get()
      
      <span class="property">@initializedPixelData</span> = <span class="property">@originalPixelData</span> = <span class="literal">null</span>
      <span class="property">@cropCoordinates</span> = x: <span class="number">0</span>, y: <span class="number">0</span>
      <span class="property">@cropped</span> = <span class="literal">false</span>
      <span class="property">@resized</span> = <span class="literal">false</span>

      <span class="property">@pixelStack</span> = []  <span class="comment"># Stores the pixel layers</span>
      <span class="property">@layerStack</span> = []  <span class="comment"># Stores all of the layers waiting to be rendered</span>
      <span class="property">@canvasQueue</span> = [] <span class="comment"># Stores all of the canvases to be processed</span>
      <span class="property">@currentLayer</span> = <span class="literal">null</span>
      <span class="property">@scaled</span> = <span class="literal">false</span>

      <span class="property">@analyze</span> = <span class="keyword">new</span> Analyze @
      <span class="property">@renderer</span> = <span class="keyword">new</span> Renderer @

      <span class="property">@domIsLoaded</span> =&gt;  
        <span class="property">@parseArguments</span>(args)
        <span class="property">@setup</span>()

      <span class="keyword">return</span> @
    <span class="keyword">else</span>
      <span class="keyword">return</span> <span class="keyword">new</span> Caman(arguments)</pre></div></div>
            
        </li>
        
        
        <li id="section-16">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-16">&#182;</a>
              </div>
              <p>Checks to ensure the DOM is loaded. Ensures the callback is always fired, even
if the DOM is already loaded before it&#39;s invoked. The callback is also always
called asynchronously.</p>
<p>@param [Function] cb The callback function to fire when the DOM is ready.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  domIsLoaded: (cb) -&gt;
    <span class="keyword">if</span> Caman.NodeJS
      setTimeout =&gt;
        cb.call(@)
      , <span class="number">0</span>
    <span class="keyword">else</span>
      <span class="keyword">if</span> document.readyState <span class="keyword">is</span> <span class="string">"complete"</span>
        Log.debug <span class="string">"DOM initialized"</span>
        setTimeout =&gt;
          cb.call(@)
        , <span class="number">0</span>
      <span class="keyword">else</span>
        <span class="function"><span class="title">listener</span></span> = =&gt;
          <span class="keyword">if</span> document.readyState <span class="keyword">is</span> <span class="string">"complete"</span>
            Log.debug <span class="string">"DOM initialized"</span>
            cb.call(@)

        document.addEventListener <span class="string">"readystatechange"</span>, listener, <span class="literal">false</span></pre></div></div>
            
        </li>
        
        
        <li id="section-17">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-17">&#182;</a>
              </div>
              <p>Parses the arguments given to the Caman function, and sets the appropriate
properties on this instance.</p>
<p>@params [Array] args Array of arguments passed to Caman.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  parseArguments: (args) -&gt;
    <span class="keyword">throw</span> <span class="string">"Invalid arguments given"</span> <span class="keyword">if</span> args.length <span class="keyword">is</span> <span class="number">0</span></pre></div></div>
            
        </li>
        
        
        <li id="section-18">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-18">&#182;</a>
              </div>
              <p>Defaults</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="property">@initObj</span> = <span class="literal">null</span>
    <span class="property">@initType</span> = <span class="literal">null</span>
    <span class="property">@imageUrl</span> = <span class="literal">null</span>
    <span class="property">@callback</span> = -&gt;</pre></div></div>
            
        </li>
        
        
        <li id="section-19">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-19">&#182;</a>
              </div>
              <p>First argument is always our canvas/image</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="property">@setInitObject</span> args[<span class="number">0</span>]
    <span class="keyword">return</span> <span class="keyword">if</span> args.length <span class="keyword">is</span> <span class="number">1</span>
    
    <span class="keyword">switch</span> <span class="keyword">typeof</span> args[<span class="number">1</span>]
      <span class="keyword">when</span> <span class="string">"string"</span> <span class="keyword">then</span> <span class="property">@imageUrl</span> = args[<span class="number">1</span>]
      <span class="keyword">when</span> <span class="string">"function"</span> <span class="keyword">then</span> <span class="property">@callback</span> = args[<span class="number">1</span>]
      
    <span class="keyword">return</span> <span class="keyword">if</span> args.length <span class="keyword">is</span> <span class="number">2</span>

    <span class="property">@callback</span> = args[<span class="number">2</span>]

    <span class="keyword">if</span> args.length <span class="keyword">is</span> <span class="number">4</span>
      <span class="property">@options</span>[key] = val <span class="keyword">for</span> own key, val <span class="keyword">of</span> args[<span class="number">4</span>]</pre></div></div>
            
        </li>
        
        
        <li id="section-20">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-20">&#182;</a>
              </div>
              <p>Sets the initialization object for this instance.</p>
<p>@param [Object, String] obj The initialization argument.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  setInitObject: (obj) -&gt;
    <span class="keyword">if</span> Caman.NodeJS
      <span class="property">@initObj</span> = obj
      <span class="property">@initType</span> = <span class="string">'node'</span>
      <span class="keyword">return</span>

    <span class="keyword">if</span> <span class="keyword">typeof</span> obj <span class="keyword">is</span> <span class="string">"object"</span>
      <span class="property">@initObj</span> = obj
    <span class="keyword">else</span>
      <span class="property">@initObj</span> = $(obj)

    <span class="keyword">throw</span> <span class="string">"Could not find image or canvas for initialization."</span> <span class="keyword">unless</span> <span class="property">@initObj</span>?

    <span class="property">@initType</span> = <span class="property">@initObj</span>.nodeName.toLowerCase()</pre></div></div>
            
        </li>
        
        
        <li id="section-21">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-21">&#182;</a>
              </div>
              <p>Begins the setup process, which differs depending on whether we&#39;re in NodeJS,
or if an image or canvas object was provided.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  setup: -&gt;
    <span class="keyword">switch</span> <span class="property">@initType</span>
      <span class="keyword">when</span> <span class="string">"node"</span> <span class="keyword">then</span> <span class="property">@initNode</span>()
      <span class="keyword">when</span> <span class="string">"img"</span> <span class="keyword">then</span> <span class="property">@initImage</span>()
      <span class="keyword">when</span> <span class="string">"canvas"</span> <span class="keyword">then</span> <span class="property">@initCanvas</span>()</pre></div></div>
            
        </li>
        
        
        <li id="section-22">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-22">&#182;</a>
              </div>
              <p>Initialization function for NodeJS.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  initNode: -&gt;
    Log.debug <span class="string">"Initializing for NodeJS"</span>

    <span class="keyword">if</span> <span class="keyword">typeof</span> <span class="property">@initObj</span> <span class="keyword">is</span> <span class="string">"string"</span> <span class="keyword">and</span> <span class="property">@initObj</span>.match(<span class="regexp">/^https?:\/\//</span>)
      <span class="property">@readFromHttp</span> <span class="property">@initObj</span>, <span class="property">@nodeFileReady</span>
    <span class="keyword">else</span> <span class="keyword">if</span> <span class="keyword">typeof</span> <span class="property">@initObj</span> <span class="keyword">is</span> <span class="string">"string"</span>
      fs.readFile <span class="property">@initObj</span>, <span class="property">@nodeFileReady</span>
    <span class="keyword">else</span>
      <span class="property">@nodeFileReady</span> <span class="literal">null</span>, <span class="property">@initObj</span>

  readFromHttp: (url, callback) -&gt;
    Log.debug <span class="string">"Fetching image from <span class="subst">#{url}</span>"</span>

    req = http.get url, (res) -&gt;
      buf = <span class="string">''</span>
      res.setEncoding(<span class="string">'binary'</span>)
      res.<span class="literal">on</span> <span class="string">'data'</span>, (chunk) -&gt;
        buf += chunk
      res.<span class="literal">on</span> <span class="string">'end'</span>, -&gt;
        callback <span class="literal">null</span>, <span class="keyword">new</span> Buffer(buf, <span class="string">'binary'</span>);
    req.<span class="literal">on</span> <span class="string">'error'</span>, callback

  nodeFileReady: (err, data) =&gt;
    <span class="keyword">throw</span> err <span class="keyword">if</span> err

    <span class="property">@image</span> = <span class="keyword">new</span> Image()
    <span class="property">@image</span>.src = data

    Log.debug <span class="string">"Image loaded. Width = <span class="subst">#{@imageWidth()}</span>, Height = <span class="subst">#{@imageHeight()}</span>"</span>
    <span class="property">@canvas</span> = <span class="keyword">new</span> Canvas <span class="property">@imageWidth</span>(), <span class="property">@imageHeight</span>()
    <span class="property">@finishInit</span>()</pre></div></div>
            
        </li>
        
        
        <li id="section-23">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-23">&#182;</a>
              </div>
              <p>Initialization function for the browser and image objects.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  initImage: -&gt;
    <span class="property">@image</span> = <span class="property">@initObj</span>
    <span class="property">@canvas</span> = document.createElement <span class="string">'canvas'</span>
    <span class="property">@context</span> = <span class="property">@canvas</span>.getContext <span class="string">'2d'</span>
    Util.copyAttributes <span class="property">@image</span>, <span class="property">@canvas</span>, except: [<span class="string">'src'</span>]</pre></div></div>
            
        </li>
        
        
        <li id="section-24">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-24">&#182;</a>
              </div>
              <p>Swap out the image with the canvas element if the image exists
in the DOM.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="property">@image</span>.parentNode.replaceChild <span class="property">@canvas</span>, <span class="property">@image</span> <span class="keyword">if</span> <span class="property">@image</span>.parentNode?

    <span class="property">@imageAdjustments</span>()
    <span class="property">@waitForImageLoaded</span>()</pre></div></div>
            
        </li>
        
        
        <li id="section-25">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-25">&#182;</a>
              </div>
              <p>Initialization function for the browser and canvas objects.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  initCanvas: -&gt;
    <span class="property">@canvas</span> = <span class="property">@initObj</span>
    <span class="property">@context</span> = <span class="property">@canvas</span>.getContext <span class="string">'2d'</span>

    <span class="keyword">if</span> <span class="property">@imageUrl</span>?
      <span class="property">@image</span> = document.createElement <span class="string">'img'</span>
      <span class="property">@image</span>.src = <span class="property">@imageUrl</span>

      <span class="property">@imageAdjustments</span>()
      <span class="property">@waitForImageLoaded</span>()
    <span class="keyword">else</span>
      <span class="property">@finishInit</span>()</pre></div></div>
            
        </li>
        
        
        <li id="section-26">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-26">&#182;</a>
              </div>
              <p>Automatically check for a HiDPI capable screen and swap out the image if possible.
Also checks the image URL to see if it&#39;s a cross-domain request, and attempt to
proxy the image. If a cross-origin type is configured, the proxy will be ignored.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  imageAdjustments: -&gt;
    <span class="keyword">if</span> <span class="property">@needsHiDPISwap</span>()
      Log.debug <span class="property">@image</span>.src, <span class="string">"-&gt;"</span>, <span class="property">@hiDPIReplacement</span>()

      <span class="property">@swapped</span> = <span class="literal">true</span>
      <span class="property">@image</span>.src = <span class="property">@hiDPIReplacement</span>()

    <span class="keyword">if</span> IO.isRemote(<span class="property">@image</span>)
      <span class="property">@image</span>.src = IO.proxyUrl(<span class="property">@image</span>.src)
      Log.debug <span class="string">"Remote image detected, using URL = <span class="subst">#{@image.src}</span>"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-27">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-27">&#182;</a>
              </div>
              <p>Utility function that fires {Caman#imageLoaded} once the image is finished loading.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  waitForImageLoaded: -&gt;
    <span class="keyword">if</span> <span class="property">@isImageLoaded</span>()
      <span class="property">@imageLoaded</span>()
    <span class="keyword">else</span>
      <span class="property">@image</span>.onload = <span class="property">@imageLoaded</span></pre></div></div>
            
        </li>
        
        
        <li id="section-28">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-28">&#182;</a>
              </div>
              <p>Checks if the given image is finished loading.
@return [Boolean] Is the image loaded?</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  isImageLoaded: -&gt;
    <span class="keyword">return</span> <span class="literal">false</span> <span class="keyword">unless</span> <span class="property">@image</span>.complete</pre></div></div>
            
        </li>
        
        
        <li id="section-29">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-29">&#182;</a>
              </div>
              <p>Internet Explorer is weird.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="keyword">return</span> <span class="literal">false</span> <span class="keyword">if</span> <span class="property">@image</span>.naturalWidth? <span class="keyword">and</span> <span class="property">@image</span>.naturalWidth <span class="keyword">is</span> <span class="number">0</span>
    <span class="keyword">return</span> <span class="literal">true</span></pre></div></div>
            
        </li>
        
        
        <li id="section-30">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-30">&#182;</a>
              </div>
              <p>Internet Explorer has issues figuring out image dimensions when they aren&#39;t
explicitly defined, apparently. We check the normal width/height properties first,
but fall back to natural sizes if they are 0.
@return [Number] Width of the initialization image.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  imageWidth: -&gt; <span class="property">@image</span>.width <span class="keyword">or</span> <span class="property">@image</span>.naturalWidth</pre></div></div>
            
        </li>
        
        
        <li id="section-31">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-31">&#182;</a>
              </div>
              <p>@see Caman#imageWidth
@return [Number] Height of the initialization image.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  imageHeight: -&gt; <span class="property">@image</span>.height <span class="keyword">or</span> <span class="property">@image</span>.naturalHeight</pre></div></div>
            
        </li>
        
        
        <li id="section-32">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-32">&#182;</a>
              </div>
              <p>Function that is called once the initialization image is finished loading.
We make sure that the canvas dimensions are properly set here.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  imageLoaded: -&gt;
    Log.debug <span class="string">"Image loaded. Width = <span class="subst">#{@imageWidth()}</span>, Height = <span class="subst">#{@imageHeight()}</span>"</span>

    <span class="keyword">if</span> <span class="property">@swapped</span>
      <span class="property">@canvas</span>.width = <span class="property">@imageWidth</span>() / <span class="property">@hiDPIRatio</span>()
      <span class="property">@canvas</span>.height = <span class="property">@imageHeight</span>() / <span class="property">@hiDPIRatio</span>()
    <span class="keyword">else</span>
      <span class="property">@canvas</span>.width = <span class="property">@imageWidth</span>()
      <span class="property">@canvas</span>.height = <span class="property">@imageHeight</span>()

    <span class="property">@finishInit</span>()</pre></div></div>
            
        </li>
        
        
        <li id="section-33">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-33">&#182;</a>
              </div>
              <p>Final step of initialization. We finish setting up our canvas element, and we
draw the image to the canvas (if applicable).</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  finishInit: -&gt;
    <span class="property">@context</span> = <span class="property">@canvas</span>.getContext <span class="string">'2d'</span> <span class="keyword">unless</span> <span class="property">@context</span>?

    <span class="property">@originalWidth</span> = <span class="property">@preScaledWidth</span> = <span class="property">@width</span> = <span class="property">@canvas</span>.width
    <span class="property">@originalHeight</span> = <span class="property">@preScaledHeight</span> = <span class="property">@height</span> = <span class="property">@canvas</span>.height

    <span class="property">@hiDPIAdjustments</span>()
    <span class="property">@assignId</span>() <span class="keyword">unless</span> <span class="property">@hasId</span>()

    <span class="keyword">if</span> <span class="property">@image</span>?
      <span class="property">@context</span>.drawImage <span class="property">@image</span>, 
        <span class="number">0</span>, <span class="number">0</span>, 
        <span class="property">@imageWidth</span>(), <span class="property">@imageHeight</span>(), 
        <span class="number">0</span>, <span class="number">0</span>, 
        <span class="property">@preScaledWidth</span>, <span class="property">@preScaledHeight</span>
    
    <span class="property">@imageData</span> = <span class="property">@context</span>.getImageData <span class="number">0</span>, <span class="number">0</span>, <span class="property">@canvas</span>.width, <span class="property">@canvas</span>.height
    <span class="property">@pixelData</span> = <span class="property">@imageData</span>.data
    
    <span class="keyword">if</span> Caman.allowRevert
      <span class="property">@initializedPixelData</span> = Util.dataArray(<span class="property">@pixelData</span>.length)
      <span class="property">@originalPixelData</span> = Util.dataArray(<span class="property">@pixelData</span>.length)

      <span class="keyword">for</span> pixel, i <span class="keyword">in</span> <span class="property">@pixelData</span>
        <span class="property">@initializedPixelData</span>[i] = pixel
        <span class="property">@originalPixelData</span>[i] = pixel

    <span class="property">@dimensions</span> =
      width: <span class="property">@canvas</span>.width
      height: <span class="property">@canvas</span>.height

    Store.put <span class="property">@id</span>, @ <span class="keyword">unless</span> Caman.NodeJS

    <span class="property">@callback</span>.call @,@</pre></div></div>
            
        </li>
        
        
        <li id="section-34">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-34">&#182;</a>
              </div>
              <p>Reset the callback so re-initialization doesn&#39;t
trigger it again.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    <span class="property">@callback</span> = -&gt;</pre></div></div>
            
        </li>
        
        
        <li id="section-35">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-35">&#182;</a>
              </div>
              <p>If you have a separate context reference to this canvas outside of CamanJS
and you make a change to the canvas outside of CamanJS, you will have to call
this function to update our context reference to include those changes.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  reloadCanvasData: -&gt;
    <span class="property">@imageData</span> = <span class="property">@context</span>.getImageData <span class="number">0</span>, <span class="number">0</span>, <span class="property">@canvas</span>.width, <span class="property">@canvas</span>.height
    <span class="property">@pixelData</span> = <span class="property">@imageData</span>.data</pre></div></div>
            
        </li>
        
        
        <li id="section-36">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-36">&#182;</a>
              </div>
              <p>Reset the canvas pixels to the original state at initialization.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  resetOriginalPixelData: -&gt;
    <span class="keyword">throw</span> <span class="string">"Revert disabled"</span> <span class="keyword">unless</span> Caman.allowRevert

    <span class="property">@originalPixelData</span> = Util.dataArray(<span class="property">@pixelData</span>.length)
    <span class="property">@originalPixelData</span>[i] = pixel <span class="keyword">for</span> pixel, i <span class="keyword">in</span> <span class="property">@pixelData</span></pre></div></div>
            
        </li>
        
        
        <li id="section-37">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-37">&#182;</a>
              </div>
              <p>Does this instance have an ID assigned?
@return [Boolean] Existance of an ID.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  hasId: -&gt; Caman.getAttrId(<span class="property">@canvas</span>)?</pre></div></div>
            
        </li>
        
        
        <li id="section-38">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-38">&#182;</a>
              </div>
              <p>Assign a unique ID to this instance.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  assignId: -&gt;
    <span class="keyword">return</span> <span class="keyword">if</span> Caman.NodeJS <span class="keyword">or</span> <span class="property">@canvas</span>.getAttribute <span class="string">'data-caman-id'</span>
    <span class="property">@canvas</span>.setAttribute <span class="string">'data-caman-id'</span>, <span class="property">@id</span></pre></div></div>
            
        </li>
        
        
        <li id="section-39">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-39">&#182;</a>
              </div>
              <p>Is HiDPI support disabled via the HTML data attribute?
@return [Boolean]</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  hiDPIDisabled: -&gt;
    <span class="property">@canvas</span>.getAttribute(<span class="string">'data-caman-hidpi-disabled'</span>) <span class="keyword">isnt</span> <span class="literal">null</span></pre></div></div>
            
        </li>
        
        
        <li id="section-40">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-40">&#182;</a>
              </div>
              <p>Perform HiDPI adjustments to the canvas. This consists of changing the
scaling and the dimensions to match that of the display.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  hiDPIAdjustments: -&gt;
    <span class="keyword">return</span> <span class="keyword">if</span> Caman.NodeJS <span class="keyword">or</span> !<span class="property">@needsHiDPISwap</span>()

    ratio = <span class="property">@hiDPIRatio</span>()

    <span class="keyword">if</span> ratio <span class="keyword">isnt</span> <span class="number">1</span>
      Log.debug <span class="string">"HiDPI ratio = <span class="subst">#{ratio}</span>"</span>
      <span class="property">@scaled</span> = <span class="literal">true</span>

      <span class="property">@preScaledWidth</span> = <span class="property">@canvas</span>.width
      <span class="property">@preScaledHeight</span> = <span class="property">@canvas</span>.height

      <span class="property">@canvas</span>.width = <span class="property">@preScaledWidth</span> * ratio
      <span class="property">@canvas</span>.height = <span class="property">@preScaledHeight</span> * ratio
      <span class="property">@canvas</span>.style.width = <span class="string">"<span class="subst">#{@preScaledWidth}</span>px"</span>
      <span class="property">@canvas</span>.style.height = <span class="string">"<span class="subst">#{@preScaledHeight}</span>px"</span>

      <span class="property">@context</span>.scale ratio, ratio

      <span class="property">@width</span> = <span class="property">@originalWidth</span> = <span class="property">@canvas</span>.width
      <span class="property">@height</span> = <span class="property">@originalHeight</span> = <span class="property">@canvas</span>.height</pre></div></div>
            
        </li>
        
        
        <li id="section-41">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-41">&#182;</a>
              </div>
              <p>Calculate the HiDPI ratio of this display based on the backing store
and the pixel ratio.
@return [Number] The HiDPI pixel ratio.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  hiDPIRatio: -&gt;
    devicePixelRatio = window.devicePixelRatio <span class="keyword">or</span> <span class="number">1</span>
    backingStoreRatio = <span class="property">@context</span>.webkitBackingStorePixelRatio <span class="keyword">or</span>
                        <span class="property">@context</span>.mozBackingStorePixelRatio <span class="keyword">or</span>
                        <span class="property">@context</span>.msBackingStorePixelRatio <span class="keyword">or</span>
                        <span class="property">@context</span>.oBackingStorePixelRatio <span class="keyword">or</span>
                        <span class="property">@context</span>.backingStorePixelRatio <span class="keyword">or</span> <span class="number">1</span>

    devicePixelRatio / backingStoreRatio</pre></div></div>
            
        </li>
        
        
        <li id="section-42">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-42">&#182;</a>
              </div>
              <p>Is this display HiDPI capable?
@return [Boolean]</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  hiDPICapable: -&gt; window.devicePixelRatio? <span class="keyword">and</span> window.devicePixelRatio <span class="keyword">isnt</span> <span class="number">1</span></pre></div></div>
            
        </li>
        
        
        <li id="section-43">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-43">&#182;</a>
              </div>
              <p>Do we need to perform an image swap with a HiDPI image?
@return [Boolean]</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  needsHiDPISwap: -&gt;
    <span class="keyword">return</span> <span class="literal">false</span> <span class="keyword">if</span> <span class="property">@hiDPIDisabled</span>() <span class="keyword">or</span> !<span class="property">@hiDPICapable</span>()
    <span class="property">@hiDPIReplacement</span>() <span class="keyword">isnt</span> <span class="literal">null</span></pre></div></div>
            
        </li>
        
        
        <li id="section-44">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-44">&#182;</a>
              </div>
              <p>Gets the HiDPI replacement for the initialization image.
@return [String] URL to the HiDPI version.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  hiDPIReplacement: -&gt;
    <span class="keyword">return</span> <span class="literal">null</span> <span class="keyword">unless</span> <span class="property">@image</span>?
    <span class="property">@image</span>.getAttribute <span class="string">'data-caman-hidpi'</span></pre></div></div>
            
        </li>
        
        
        <li id="section-45">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-45">&#182;</a>
              </div>
              <p>Replaces the current canvas with a new one, and properly updates all of the
applicable references for this instance.</p>
<p>@param [DOMObject] newCanvas The canvas to swap into this instance.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  replaceCanvas: (newCanvas) -&gt;
    oldCanvas = <span class="property">@canvas</span>
    <span class="property">@canvas</span> = newCanvas
    <span class="property">@context</span> = <span class="property">@canvas</span>.getContext <span class="string">'2d'</span>


    oldCanvas.parentNode.replaceChild <span class="property">@canvas</span>, oldCanvas <span class="keyword">if</span> !Caman.NodeJS
    
    <span class="property">@width</span>  = <span class="property">@canvas</span>.width
    <span class="property">@height</span> = <span class="property">@canvas</span>.height

    <span class="property">@reloadCanvasData</span>()

    <span class="property">@dimensions</span> =
      width: <span class="property">@canvas</span>.width
      height: <span class="property">@canvas</span>.height</pre></div></div>
            
        </li>
        
        
        <li id="section-46">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-46">&#182;</a>
              </div>
              <p>Begins the rendering process. This will execute all of the filter functions
called either since initialization or the previous render.</p>
<p>@param [Function] callback Function to call when rendering is finished.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  render: (<span class="function"><span class="title">callback</span></span> = -&gt;) -&gt;
    Event.trigger @, <span class="string">"renderStart"</span>
    
    <span class="property">@renderer</span>.execute =&gt;
      <span class="property">@context</span>.putImageData <span class="property">@imageData</span>, <span class="number">0</span>, <span class="number">0</span>
      callback.call @</pre></div></div>
            
        </li>
        
        
        <li id="section-47">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-47">&#182;</a>
              </div>
              <p>Reverts the canvas back to it&#39;s original state while
maintaining any cropped or resized dimensions.</p>
<p>@param [Boolean] updateContext Should we apply the reverted pixel data to the
  canvas context thus triggering a re-render by the browser?</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  revert: (updateContext = <span class="literal">true</span>) -&gt;
    <span class="keyword">throw</span> <span class="string">"Revert disabled"</span> <span class="keyword">unless</span> Caman.allowRevert

    <span class="property">@pixelData</span>[i] = pixel <span class="keyword">for</span> pixel, i <span class="keyword">in</span> <span class="property">@originalVisiblePixels</span>()
    <span class="property">@context</span>.putImageData <span class="property">@imageData</span>, <span class="number">0</span>, <span class="number">0</span> <span class="keyword">if</span> updateContext</pre></div></div>
            
        </li>
        
        
        <li id="section-48">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-48">&#182;</a>
              </div>
              <p>Completely resets the canvas back to it&#39;s original state.
Any size adjustments will also be reset.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  reset: -&gt;
    canvas = document.createElement(<span class="string">'canvas'</span>)
    Util.copyAttributes(<span class="property">@canvas</span>, canvas)

    canvas.width = <span class="property">@originalWidth</span>
    canvas.height = <span class="property">@originalHeight</span>

    ctx = canvas.getContext(<span class="string">'2d'</span>)
    imageData = ctx.getImageData <span class="number">0</span>, <span class="number">0</span>, canvas.width, canvas.height
    pixelData = imageData.data

    pixelData[i] = pixel <span class="keyword">for</span> pixel, i <span class="keyword">in</span> <span class="property">@initializedPixelData</span>

    ctx.putImageData imageData, <span class="number">0</span>, <span class="number">0</span>

    <span class="property">@cropCoordinates</span> = x: <span class="number">0</span>, y: <span class="number">0</span>
    <span class="property">@resized</span> = <span class="literal">false</span>

    <span class="property">@replaceCanvas</span>(canvas)</pre></div></div>
            
        </li>
        
        
        <li id="section-49">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-49">&#182;</a>
              </div>
              <p>Returns the original pixel data while maintaining any
cropping or resizing that may have occured.
<strong>Warning</strong>: this is currently in beta status.</p>
<p>@return [Array] Original pixel values still visible after cropping or resizing.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  originalVisiblePixels: -&gt;
    <span class="keyword">throw</span> <span class="string">"Revert disabled"</span> <span class="keyword">unless</span> Caman.allowRevert

    pixels = []

    startX = <span class="property">@cropCoordinates</span>.x
    endX = startX + <span class="property">@width</span>
    startY = <span class="property">@cropCoordinates</span>.y
    endY = startY + <span class="property">@height</span>

    <span class="keyword">if</span> <span class="property">@resized</span>
      canvas = document.createElement(<span class="string">'canvas'</span>)
      canvas.width = <span class="property">@originalWidth</span>
      canvas.height = <span class="property">@originalHeight</span>

      ctx = canvas.getContext(<span class="string">'2d'</span>)
      imageData = ctx.getImageData <span class="number">0</span>, <span class="number">0</span>, canvas.width, canvas.height
      pixelData = imageData.data

      pixelData[i] = pixel <span class="keyword">for</span> pixel, i <span class="keyword">in</span> <span class="property">@originalPixelData</span>

      ctx.putImageData imageData, <span class="number">0</span>, <span class="number">0</span>

      scaledCanvas = document.createElement(<span class="string">'canvas'</span>)
      scaledCanvas.width = <span class="property">@width</span>
      scaledCanvas.height = <span class="property">@height</span>

      ctx = scaledCanvas.getContext(<span class="string">'2d'</span>)
      ctx.drawImage canvas, <span class="number">0</span>, <span class="number">0</span>, <span class="property">@originalWidth</span>, <span class="property">@originalHeight</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="property">@width</span>, <span class="property">@height</span>

      pixelData = ctx.getImageData(<span class="number">0</span>, <span class="number">0</span>, <span class="property">@width</span>, <span class="property">@height</span>).data
      width = <span class="property">@width</span>
    <span class="keyword">else</span>
      pixelData = <span class="property">@originalPixelData</span>
      width = <span class="property">@originalWidth</span>

    <span class="keyword">for</span> i <span class="keyword">in</span> [<span class="number">0.</span>..pixelData.length] <span class="keyword">by</span> <span class="number">4</span>
      coord = Pixel.locationToCoordinates(i, width)
      <span class="keyword">if</span> (startX &lt;= coord.x &lt; endX) <span class="keyword">and</span> (startY &lt;= coord.y &lt; endY)
        pixels.push pixelData[i], 
          pixelData[i+<span class="number">1</span>],
          pixelData[i+<span class="number">2</span>], 
          pixelData[i+<span class="number">3</span>]

    pixels</pre></div></div>
            
        </li>
        
        
        <li id="section-50">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-50">&#182;</a>
              </div>
              <p>Pushes the filter callback that modifies the RGBA object into the
render queue.</p>
<p>@param [String] name Name of the filter function.
@param [Function] processFn The Filter function.
@return [Caman]</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  process: (name, processFn) -&gt;
    <span class="property">@renderer</span>.add
      type: Filter.Type.Single
      name: name
      processFn: processFn

    <span class="keyword">return</span> @</pre></div></div>
            
        </li>
        
        
        <li id="section-51">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-51">&#182;</a>
              </div>
              <p>Pushes the kernel into the render queue.</p>
<p>@param [String] name The name of the kernel.
@param [Array] adjust The convolution kernel represented as a 1D array.
@param [Number] divisor The divisor for the convolution.
@param [Number] bias The bias for the convolution.
@return [Caman]</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  processKernel: (name, adjust, divisor = <span class="literal">null</span>, bias = <span class="number">0</span>) -&gt;
    <span class="keyword">unless</span> divisor?
      divisor = <span class="number">0</span>
      divisor += adjust[i] <span class="keyword">for</span> i <span class="keyword">in</span> [<span class="number">0.</span>..adjust.length]

    <span class="property">@renderer</span>.add
      type: Filter.Type.Kernel
      name: name
      adjust: adjust
      divisor: divisor
      bias: bias

    <span class="keyword">return</span> @</pre></div></div>
            
        </li>
        
        
        <li id="section-52">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-52">&#182;</a>
              </div>
              <p>Adds a standalone plugin into the render queue.</p>
<p>@param [String] plugin Name of the plugin.
@param [Array] args Array of arguments to pass to the plugin.
@return [Caman]</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  processPlugin: (plugin, args) -&gt;
    <span class="property">@renderer</span>.add
      type: Filter.Type.Plugin
      plugin: plugin
      args: args

    <span class="keyword">return</span> @</pre></div></div>
            
        </li>
        
        
        <li id="section-53">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-53">&#182;</a>
              </div>
              <p>Pushes a new layer operation into the render queue and calls the layer
callback.</p>
<p>@param [Function] callback Function that is executed within the context of the layer.
  All filter and adjustment functions for the layer will be executed inside of this function.
@return [Caman]</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  newLayer: (callback) -&gt;
    layer = <span class="keyword">new</span> Layer @
    <span class="property">@canvasQueue</span>.push layer
    <span class="property">@renderer</span>.add type: Filter.Type.LayerDequeue

    callback.call layer

    <span class="property">@renderer</span>.add type: Filter.Type.LayerFinished
    <span class="keyword">return</span> @</pre></div></div>
            
        </li>
        
        
        <li id="section-54">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-54">&#182;</a>
              </div>
              <p>Pushes the layer context and moves to the next operation.
@param [Layer] layer The layer to execute.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  executeLayer: (layer) -&gt; <span class="property">@pushContext</span> layer</pre></div></div>
            
        </li>
        
        
        <li id="section-55">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-55">&#182;</a>
              </div>
              <p>Set all of the relevant data to the new layer.
@param [Layer] layer The layer whose context we want to switch to.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  pushContext: (layer) -&gt;
    <span class="property">@layerStack</span>.push <span class="property">@currentLayer</span>
    <span class="property">@pixelStack</span>.push <span class="property">@pixelData</span>
    <span class="property">@currentLayer</span> = layer
    <span class="property">@pixelData</span> = layer.pixelData</pre></div></div>
            
        </li>
        
        
        <li id="section-56">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-56">&#182;</a>
              </div>
              <p>Restore the previous layer context.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  popContext: -&gt;
    <span class="property">@pixelData</span> = <span class="property">@pixelStack</span>.pop()
    <span class="property">@currentLayer</span> = <span class="property">@layerStack</span>.pop()</pre></div></div>
            
        </li>
        
        
        <li id="section-57">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-57">&#182;</a>
              </div>
              <p>Applies the current layer to its parent layer.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>  applyCurrentLayer: -&gt; <span class="property">@currentLayer</span>.applyToParent()

Root.Caman = Caman</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>
